<template>
    <header>
        <div class="logo">
            <h1>叩丁狼电商运营平台</h1>
        </div>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{ userStore.userName }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </header>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/userStore'
import { ElMessage } from 'element-plus';
import { logout } from '@/utils'
const userStore = useUserStore();
const handleCommand = (cmd: string) => {
    switch (cmd) {
        case 'logout':
            // 提示用户
            ElMessage({
                type: 'success',
                message: '退出成功'
            })
            logout()
            break;
    }
}
</script>

<style lang="less" scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>